<style scoped>
.container {
	padding: 16px;
	border: 1px solid #efefef;
}
</style>

<!-- 页面布局-->
<template>
	<div class="table">
		<!-- 主体区 -->
		<div class="container">
			<!-- 表单区 -->
			<div class="form-data-box">
				<el-form
					:model="formBean"
					:rules="validateRules"
					ref="form1"
					label-width="100px"
					class="ruleForm"
				>
					<el-row>
						<el-col :span="24">
							<el-form-item label="角色名称" prop="rolename">
								<el-input :readonly="readOnly" v-model="formBean.rolename"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="角色描述" prop="roledesc">
								<el-input :readonly="readOnly" v-model="formBean.roledesc"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<!-- <el-row>
            <el-col :span="12">
              <el-form-item label="检索代码" prop="code">
                <el-input :readonly="readOnly" v-model="formBean.code"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="角色类型" prop="roletype">
                <el-input :readonly="readOnly" v-model="formBean.roletype"></el-input>
              </el-form-item>
            </el-col>
					</el-row>-->
					<!-- <el-row>
            <el-col :span="12">
              <el-form-item label="状态" prop="state">
                <el-select :disabled=readOnly v-model="formBean.state" placeholder="请选择状态">
                    <el-option label="停用" value=0></el-option>
                    <el-option label="启用" value=1></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12"></el-col>
					</el-row>-->
				</el-form>
			</div>
			<!-- 表单区END -->
			<!-- 按钮操作区 -->
			<span slot="footer" class="form-btn-box">
				<el-button v-if="!readOnly" @click="resetForm('form1')">重 置</el-button>
				<el-button
					v-if="!readOnly"
					type="primary"
					@click="submitForm('form1')"
					v-loading.fullscreen.lock="fullscreenLoading"
				>确 定</el-button>
				<el-button @click="cnacelForm('form1')">取 消</el-button>
			</span>
			<!-- 按钮操作区END -->
		</div>
		<!-- 主体区END -->
	</div>
</template>

<script>
import { validateMobile } from "common/validate";
export default {
	data() {
		return {
			// 提交表单的loading设置标识
			fullscreenLoading: false,
			firstLoadedData: "{}",
			// 新增用户表单信息
			formBean: {
				id: "", //id
				rolename: "", //角色名称
				roledesc: "", //角色描述
				code: "", //检索代码
				roletype: "", //角色类型
				state: "" //状态
			},
			// 表单校验规则
			validateRules: {
				id: [{ required: true, message: "请输入id", trigger: "blur" }],
				rolename: [
					{ required: true, message: "请输入角色名称", trigger: "blur" }
				],
				roledesc: [
					{ required: false, message: "请输入角色描述", trigger: "blur" }
				],
				code: [{ required: false, message: "请输入检索代码", trigger: "blur" }],
				roletype: [
					{ required: false, message: "请输入角色类型", trigger: "blur" }
				],
				state: [{ required: false, message: "请输入状态", trigger: "blur" }]
			},
			//所选记录id
			selectedId: "",
			//事物类型
			actType: "",
			// 表单只读状态
			readOnly: false,
			readOnlyEdt: false
		};
	},
	// 进入页面加载数据
	// activated() {
	// 	this.handleInitLoad();
	// },
	//弹出页
	props: {
		sourceData: {
			required: true
		}
	},
	// 进入页面加载数据
	mounted() {
		this.handleInitLoad();
	},

	methods: {
		/**
		 * 组件初始化加载
		 */
		handleInitLoad() {
			this.initFormData();
		},

		/**
		 * 取消返回
		 * @augments formName 表单名称
		 */
		cnacelForm(formName) {
			this.$refs[formName].resetFields();
			// this.$router.push({
			//   name: "amsroleList",
			//   params: {
			//     type: "cancel"
			//   }
			// });
			this.$emit("cancel", this.cancelData);
		},
		/**
		 * 重置表单
		 * @augments formName 表单名称
		 */
		resetForm(formName) {
			this.formBean = JSON.parse(this.firstLoadedData);
		},
		/**
		 *初始化加载表单数据
		 */
		initFormData() {
			// this.selectedId = this.$route.query.seleid;
			// this.actType = this.$route.query.actType;
			this.selectedId = this.sourceData.seleid;
			this.actType = this.sourceData.actType;
			this.readOnlyEdt = true;
			if (this.actType == "view") {
				// 查看状态 标识表单只读
				this.readOnly = true;
			} else if (this.actType == "add") {
				this.readOnly = false;
				this.readOnlyEdt = false;
				//清空修改保存之后数据还存在的情况
				for (var key in this.formBean) {
					this.formBean[key] = "";
				}
			} else {
				this.readOnly = false;
			}
			var url = this.httpRoot.BASEURL_UIM + "rest/uim/ams/amsrole/";
			if (this.actType != null && this.actType.length > 0) {
				url += "to" + this.actType;
			}
			//查询参数
			var paramQuery = {
				loginsid: this.$util.getLoginer().sessionId,
				id: this.selectedId
			};
			if (this.actType == "add") {
				//this.formBean.type = "2";
				//this.formBean.state = "1";
			} else {
				this.$axios
					.get(url, {
						params: paramQuery
					})
					.then(res => {
						this.formBean = {};
						if (res.data.result == "true") {
							this.formBean = res.data.resultData;
							this.firstLoadedData = JSON.stringify(this.formBean);
							//
						} else {
							this.$error(
								res.data.resultMessage + ",错误代码:" + res.data.resultCode
							);
						}
					})
					.catch(function(error) {});
			}
		},

		/**
		 * 提交表单
		 * @augments formName 表单名称
		 */
		submitForm(formName) {
			//
			this.$refs[formName].validate(valid => {
				if (valid) {
					// 表单校验成功
					if (this.actType == "add" || this.actType == "upd") {
						var url = this.httpRoot.BASEURL_UIM + "rest/uim/ams/amsrole/";
						url +=
							this.actType +
							"save" +
							"?loginsid=" +
							this.$util.getLoginer().sessionId;
						//
						// 开启提交表单的loading
						this.fullscreenLoading = true;
						this.$axios
							.post(url, this.formBean)
							.then(res => {
								// 关闭提交表单的loading
								this.fullscreenLoading = false;
								if (res.data.result == "true") {
									this.$message({
										message: "数据保存成功.",
										type: "success"
									});
									// this.$router.push({
									//   path: "/amsroleList"
									// });
									// this.$emit("cancel", this.cancelData);
									//弹出框
									this.$emit("ok", {});
								} else {
									this.$error(
										res.data.resultMessage + ",错误代码:" + res.data.resultCode
									);
								}
							})
							.catch(function(error) {
								this.fullscreenLoading = false;
							});
					}
				} else {
					// 表单校验失败
					// this.$error("数据校验失败.");
				}
			});
		}
	}
};
</script>
